谈谈 useMemo

是什么

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

1. useMemo() 返回的是一个 memoized 值，只有当依赖项（比如上面的 a,b 发生变化的时候，才会重新计算这个 memoized 值）
2. memoized 值不变的情况下，不会重新触发渲染逻辑。
3. useMemo() 是在 render 期间执行的，所以不能进行一些额外的副操作，比如网络请求等。
4. 如果没有提供依赖数组（上面的 [a,b]）则每次都会重新计算 memoized 值，也就会 re-redner

示例

预览地址

import React, { useMemo } from 'react';

export default (props = {}) => {
    console.log(`--- component re-render ---`);
    return useMemo(() => {
        console.log(`--- useMemo re-render ---`);
        return <div>
            {/* <p>step is : {props.step}</p> */}
            {/* <p>count is : {props.count}</p> */}
            <p>number is : {props.number}</p>
        </div>
    }, [props.number]);
}

只有当依赖的 props.number 发生变化的时候，才会重新触发 useMemo() 包装的里面的 re-render

参考文章

• React.memo 与 useMemo